<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cURL 转代码工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="title">
                <span class="title-icon">⚡</span>
                cURL 转代码工具
            </h1>
            <p class="subtitle">将 cURL 命令转换为各种编程语言代码</p>
        </header>

        <div class="main-content">
            <!-- 左侧输入区域 -->
            <div class="input-section">
                <div class="section-header">
                    <h2>输入 cURL 命令</h2>
                </div>
                
                <!-- 语言选择下拉框 -->
                <div class="language-selector">
                    <label for="language-select">目标语言：</label>
                    <select id="language-select" class="language-dropdown">
                        <option value="python">Python</option>
                        <option value="javascript">JavaScript</option>
                        <option value="node">Node.js</option>
                        <option value="go">Go</option>
                        <option value="java">Java</option>
                        <option value="php">PHP</option>
                        <option value="csharp">C#</option>
                        <option value="ruby">Ruby</option>
                        <option value="rust">Rust</option>
                        <option value="swift">Swift</option>
                        <option value="kotlin">Kotlin</option>
                        <option value="dart">Dart</option>
                        <option value="r">R</option>
                        <option value="powershell">PowerShell</option>
                        <option value="http">HTTP</option>
                        <option value="wget">Wget</option>
                    </select>
                </div>

                <!-- cURL 输入框 -->
                <div class="input-container">
                    <textarea 
                        id="curl-input" 
                        class="curl-textarea" 
                        placeholder="请输入 cURL 命令，例如：&#10;curl -X POST https://api.example.com/users &#10;  -H 'Content-Type: application/json' &#10;  -d '{&quot;name&quot;: &quot;张三&quot;, &quot;email&quot;: &quot;zhangsan@example.com&quot;}'"></textarea>
                </div>

                <!-- 转换按钮 -->
                <div class="convert-btn-container">
                    <button id="convert-btn" class="convert-btn">
                        <span class="btn-icon">🔄</span>
                        转换代码
                    </button>
                </div>
            </div>

            <!-- 右侧输出区域 -->
            <div class="output-section">
                <div class="section-header">
                    <h2>转换结果</h2>
                </div>

                <!-- 代码输出框 -->
                <div class="output-container">
                    <pre id="code-output" class="code-output">在左侧输入 cURL 命令并选择目标语言，代码将自动生成在这里...</pre>
                </div>

                <!-- 复制按钮 -->
                <div class="copy-btn-container">
                    <button id="copy-btn" class="copy-btn">
                        <span class="btn-icon">📋</span>
                        复制代码
                    </button>
                </div>
            </div>
        </div>

        <!-- 提示信息区域 -->
        <div class="tips-section">
            <div class="tips-content">
                <h3>使用提示：</h3>
                <ul>
                    <li>支持转换为 16 种编程语言和工具</li>
                    <li>输入 cURL 命令后会自动转换，或点击"转换代码"按钮</li>
                    <li>点击"复制代码"按钮可快速复制转换结果</li>
                    <li>支持复杂的 cURL 参数，包括 headers、data、认证等</li>
                </ul>
            </div>
        </div>
    </div>

    <script type="module" src="script.js"></script>
</body>
</html>